<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue学习/vue.js"></script>
</head>

<body>
    <!-- #### 插槽
            组件的插槽
            ·组件的插槽也是为了让我们封装的组件更加具有扩展性。
            ·让使用者可以决定组件内部的一些内容到底展示什么。
            **组件内的元素可以通过外界指定** -->

    <div id="app">
        <cpn ref="abc">
            <!-- 通过父传子的方式不生效 -->
            <p>{{age}}</p>
        </cpn>
    </div>
    <!-- 带数据的插槽：作用域插槽 -->
    <template id="t1">
        <div>
            <h5>{{name}}</h5>
            <!-- 匿名插槽 -->
            <slot>
              <h5>{{age}}</h5>
            </slot>
            <h5>{{gender}}</h5>
            <!-- 具名插槽 -->
            <slot name="s2">
              <h5>{{height}}</h5>
            </slot>
          </div>
    </template>
    <script>
        // 注册
        Vue.component("cpn", {
            template: "#t1",
            data() {
                return {
                    name: "李寻欢",
                    age: "child",
                    gender: "男",
                    height: 180

                }
            }
        })
        new Vue({
            el: "#app",
            data: {

            },
            methods: {
                getdata: function() {
                    return this.$refs.abc.age;
                }
            },
        });
    </script>
</body>

</html>